<template>
    <div>
      <!-- 子组件模板 -->
      <h3>子组件</h3>
      
      <!-- 
        1. 默认插槽：使用 <slot></slot> 标签定义
        父组件可以将内容插入到这个位置
      -->
      <div class="slot-container default-slot">
        <h4>默认插槽：</h4>
        <slot>
          <!-- 默认内容：当父组件没有提供内容时显示 -->
          <p>这是默认插槽的默认内容</p>
        </slot>
      </div>
      
      <!-- 
        2. 具名插槽：使用 name 属性为插槽命名
        父组件可以通过 v-slot:name 或 #name 指定内容插入到哪个插槽
      -->
      <div class="slot-container named-slot">
        <h4>具名插槽 (header)：</h4>
        <slot name="header">
          <p>这是 header 插槽的默认内容</p>
        </slot>
      </div>
      
      <!-- 
        3. 作用域插槽：可以将子组件的数据传递给父组件使用
        通过 v-slot:name="slotProps" 在父组件中接收数据
      -->
      <div class="slot-container scoped-slot">
        <h4>作用域插槽 (content)：</h4>
        <slot name="content" 
              :item="item" 
              :index="index"
              :updateItem="updateItem">
          <p>这是 content 插槽的默认内容</p>
        </slot>
      </div>
      
      <!-- 另一个作用域插槽示例 -->
      <div class="slot-container scoped-slot">
        <h4>作用域插槽 (footer)：</h4>
        <slot name="footer" :stats="stats">
          <p>这是 footer 插槽的默认内容</p>
        </slot>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  /**
   * 插槽 (Slot) 详解 - 子组件部分
   * 
   * 1. 插槽的概念：
   *    插槽是 Vue 提供的一种内容分发 API，允许父组件向子组件传递模板内容。
   *    子组件通过 <slot> 元素定义插槽位置，父组件可以在使用子组件时填充这些插槽。
   * 
   * 2. 插槽的类型：
   *    2.1 默认插槽：没有名称的插槽，一个组件只能有一个默认插槽
   *    2.2 具名插槽：有名称的插槽，通过 name 属性区分
   *    2.3 作用域插槽：可以将子组件数据传递给父组件使用的插槽
   * 
   * 3. 插槽的特点：
   *    - 允许组件更加灵活和可复用
   *    - 父组件可以决定子组件的部分内容和样式
   *    - 子组件可以为插槽提供默认内容
   *    - 作用域插槽可以实现子组件向父组件传递数据
   */
  
  import { ref, reactive } from 'vue';
  
  // 为作用域插槽准备数据
  const item = ref('示例项目');
  const index = ref(0);
  
  // 复杂数据示例
  const stats = reactive({
    views: 1024,
    likes: 42,
    comments: 8
  });
  
  // 提供给父组件的方法
  function updateItem(newValue: string) {
    item.value = newValue;
    index.value++;
  }
  
  /**
   * 4. 作用域插槽的数据传递：
   *    - 子组件通过 <slot :propName="value"> 向父组件传递数据
   *    - 父组件通过 v-slot:name="slotProps" 接收数据
   *    - 父组件可以通过 slotProps.propName 访问传递的数据
   * 
   * 5. 插槽的应用场景：
   *    5.1 布局组件：如卡片、面板、弹窗等
   *    5.2 列表渲染：自定义每个列表项的渲染方式
   *    5.3 表格组件：自定义单元格内容
   *    5.4 表单组件：自定义输入控件的布局
   *    5.5 高阶组件：包装现有组件并添加功能
   */
  </script>
  
  <style scoped>
  /* 子组件样式 */
  div {
    background: linear-gradient(to right, #f6d365, #fda085);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    letter-spacing: 1px;
  }

  h4 {
    color: #ffffff;
    font-size: 18px;
    margin: 10px 0;
    font-weight: 500;
  }

  .slot-container {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
  }

  .default-slot {
    border-left: 4px solid #ffffff;
  }

  .named-slot {
    border-left: 4px solid #64b5f6;
  }

  .scoped-slot {
    border-left: 4px solid #81c784;
  }
  </style>